<template>
	<!--主盒子-->
	<view class="container">
		<view class="head">当前筛选：
			<picker mode="multiSelector" @change="bindGradeChange" @columnchange="bindGradeColumnChange" 
			:value="curSlct" :range="gradeMlt">
				<!-- <text class="weui-input">{{jieduanls[indexJieduan]}}</text> -->
				{{gradeMlt[0][curSlct[0]]}}{{gradeMlt[1][curSlct[1]]}} ▽
			</picker>

		</view>
		<!--左侧栏-->
		<view class="nav_left">
			<block v-for="item,index in sbjTitles" :key="index">
				<!--  {{curNav == item.id ? 'active' : ''}} -->
				<!-- 三目运算符是用来给当前选中的目录修改样式用的 -->
				<!-- switchRightTab 函数是用来实现数据的渲染 -->
				<!-- 当用户点击道不同的侧边栏目录时候，根据 data-id 去从数据库获取新的数据，渲染到左侧，并且修改 curNav 的值，使新样式添加到点击的目录上，具体 js 自己实现 -->
				<button :class="'nav_left_items ' + {active:(curNav == index)}" @click="switchRightTab(index)">
					<!-- <image :src="'/image/cloudclasses/'+item.icon"></image> -->
					{{item.name}}
				</button>
			</block>
		</view>

		<!--右侧栏-->
		<view class="nav_right">
			<text v-if="courseList.length==0">这里什么都没有……</text>
			<block v-else class="result-list">
			<list>
				<videoitem v-for="item in courseList" :key="item.id"
				 :url="'./detail?vid='+item.id" class="list-item" extClass='cell' :title='item.desc' :note='item.content'
				 :rightText='item.author' thumb='/static/image/home/backGround.jpg' />
			</list>
			</block>


		</view>
	</view>
</template>

<script>
	import videoitem from '../../components/course-video/video-list-item.vue'
	export default {
		components: {
			videoitem
		},
		data() {
			return {
				xiao: ['全年级', '一年级', '二年级', '三年级', '四年级', '五年级', '六年级'],
				zhong: ['全年级', '一年级', '二年级', '三年级'],
				gradeMlt: [
					['小学', '初中', '高中'],
					[],
				],
				subjectList: [{
						name: "推荐",
						id: 0,
						icon: '0.png'
					},
					{
						name: "语文",
						id: 1,
						icon: '1.png'
					},
					{
						name: "数学",
						id: 2,
						icon: '2.png'
					},
					{
						name: "英语",
						id: 3,
						icon: '3.png'
					},
					{
						name: "思政",
						id: 4,
						icon: '4.png'
					},
					{
						name: "历史",
						id: 5,
						icon: '5.png'
					},
					{
						name: "地理",
						id: 6,
						icon: '6.png'
					},
					{
						name: "生物",
						id: 7,
						icon: '9.png'
					},
					{
						name: "物理",
						id: 8,
						icon: '7.png'
					},
					{
						name: "化学",
						id: 9,
						icon: '8.png'
					},
					{
						name: "信息",
						id: 10,
						icon: '10.png'
					},
					{
						name: "科学",
						id: 11,
						icon: '11.png'
					}
				],
				curNav: 0,
				curSlct: [0, 0],
				courseList: [],
				sbjTitles: [],
			}
		},
		onLoad(opt) {
			if(opt.grd)
				this.curSlct = [opt.grd,0]
			if (opt.grd == 0) {
				this.gradeMlt[1] = this.xiao
			} else {
				this.gradeMlt[1] = this.zhong
			}
			this.changeGradeSubject([opt.grd, 0])
		
		},
		methods: {
			bindGradeColumnChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.column, e.detail.value)
				// 在小学和中学之间切换时, 修改年级
				if (e.detail.column == 0) {
					if (e.detail.value == 0) {
						this.gradeMlt[1] = this.xiao
					} else {
						this.gradeMlt[1] = this.zhong
						if (this.curSlct[1] > 3)
							this.curSlct[1] = 0
					}
				}
			},
			bindGradeChange: function(e) {
				console.log('picker发送选择确认，携带值为', e.detail.value)
				this.curSlct = e.detail.value
				this.changeGradeSubject(this.curSlct)
				
			},
			switchRightTab: function(i) {
				// app.rqstVideoList({
				//   from:'index',
				//   kind:'chsbj',
				//   grade:this.data.curSlct,
				//   subject:this.data.sbjTitles[e.target.dataset.id].id
				// }, data => {this.setData({
				//   courseList: data.list
				// })})
				this.curNav = i
			},
			changeGradeSubject: function(grade) {
				let sbj = this.subjectList
				switch (grade[0]) {
					case 0:
						switch (grade[1]) {
							case 0:
								sbj = sbj.slice(0, 5).concat(sbj.slice(10))
								break
							case 1:
								sbj = sbj.slice(0, 3)
								break
							case 2:
								sbj = sbj.slice(0, 3)
								break
							case 3:
								sbj = sbj.slice(0, 5).concat(sbj.slice(10))
								break
							case 4:
								sbj = sbj.slice(0, 5).concat(sbj.slice(10))
								break
							case 5:
								sbj = sbj.slice(0, 5).concat(sbj.slice(10))
								break
							case 6:
								sbj = sbj.slice(0, 5).concat(sbj.slice(10))
								break
						}
						break
					case 1:
						switch (grade[1]) {
							case 0:
								sbj = sbj.slice(0, 11)
								break
							case 1:
								sbj = sbj.slice(0, 8).concat(sbj.slice(10, 11))
								break
							case 2:
								sbj = sbj.slice(0, 11)
								break
							case 3:
								sbj = sbj.slice(0, 6).concat(sbj.slice(8, 11))
								break
						}
						break
					case 2:
						switch (grade[1]) {
							case 0:
								sbj = sbj.slice(0, 11)
								break
							case 1:
								sbj = sbj.slice(0, 11)
								break
							case 2:
								sbj = sbj.slice(0, 11)
								break
							case 3:
								sbj = sbj.slice(0, 10)
								break
						}
						break
				}
				this.sbjTitles = sbj
				this.curNav = 0
			}
		},
		
		
	}
</script>

<style>
	/*总体主盒子*/

	.container {
		display: flex;
		direction: row;
	}

	.head {
		border-top: 1rpx solid #D9D9D9;
		border-bottom: 1rpx solid #D9D9D9;
		text-align: center;
		margin: 15rpx auto;
	}

	.head picker {
		display: inline-block;
		padding: 0 50rpx;
		font-size: 50rpx;
	}

	/*左侧栏主盒子*/

	.nav_left {
		/*设置行内块级元素（没使用定位）*/
		position: absolute;
		top: 100rpx;
		display: inline-block;
		width: 25%;
		height: 100%;
		/*主盒子设置背景色为灰色*/
		background: #f5f5f5;
		text-align: center;
		overflow: scroll;
	}

	.nav_left image {
		height: 30px;
		width: 30px;
	}


	/*左侧栏list的item*/

	.nav_left .nav_left_items {
		/*垂直居中*/
		line-height: 30px;
		/*再设上下padding增加高度，总高42px*/
		padding: 6px 0;
		/*只设下边线*/
		border-bottom: 1px solid #dedede;
		/*文字14px*/
		font-size: 20px;
	}

	/*左侧栏list的item被选中时*/

	.nav_left .nav_left_items.active {
		/*背景色变成白色*/
		background: #fff;
		color: red;
		border-right: 0px hidden #fff;
	}

	/*右侧栏主盒子*/

	.nav_right {
		/*右侧盒子使用了绝对定位*/
		position: absolute;
		top: 100rpx;
		right: 0;
		flex: 1;
		/*宽度75%，高度占满，并使用百分比布局*/
		width: 75%;
		height: 100%;
		padding: 10px;
		box-sizing: border-box;
		background: #fff;
		overflow: scroll;
	}

	.nav_right .nav_right_items {}

	.nav_right .nav_right_items text {
		/*给text设成块级元素*/
		display: block;
		margin-bottom: 25px;
		font-size: 20px;
		/*设置文字居中*/
		text-align: left;
		/*设置文字溢出部分为...*/
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>
